<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			div {
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			123
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<script type="text/javascript">
			//常见事件对象的属性和方法
			//1. e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象 (元素)
			var div = document.querySelector("div");
			div.addEventListener("click", function(e) {
				console.log(e.target);
				console.log(this);
			})

			var ul = document.querySelector("ul");
			ul.addEventListener("click", function(e) {
				//给ul绑定事件,那么this就指向ul
				console.log(this);
				//e.target指向触发事件的对象 li
				console.log(e.target);
			})

			//了解兼容性 window.event  e.srcElement都是为了兼容IE8
			div.onclick = function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;
				console.log(target);
			}
		</script>
	</body>
</html>
